<!-- 搜索表单 -->
<template>
  <div ref="searchWarpper">
    <el-form
      ref="comForm"
      :inline="true"
      :model="formData"
      :label-width="labelWidth"
      class="searchForm"
    >
      <template v-for="(item, index) in configList">
        <component
          :is="item.type + 'Com'"
          :key="item.label"
          :item="item"
          :formData="formData"
          class="itemStyle"
          :isReset="isReset"
          :style="itemStyle"
          :class="rowPadding(index)"
        />
        <!--        v-if="showFormItem({ item, formData })"-->
        <!--        <div-->
        <!--          v-else-->
        <!--          :key="item.label"-->
        <!--          class="el-form-item itemStyle"-->
        <!--          :style="{ width: itemStyle.width }"-->
        <!--        ></div>-->
      </template>
      <div v-if="isShow" style="display: none">
        <component
          v-for="item in unCompList"
          :is="item.type + 'Com'"
          :key="item.label"
          :item="item"
          :formData="formData"
          :isReset="isReset"
        />
      </div>

      <template v-if="!hideButton">
        <el-form-item
          v-for="i in completion"
          class="itemStyleCompletion"
          :style="itemStyle"
          :key="i"
        >
        </el-form-item>
      </template>
      <el-form-item
        class="itemStyleButton"
        :style="itemStyleSearcher"
        v-if="!hideButton"
      >
        <el-button @click="showModal" v-if="advancedSearchShow">{{
          advancedSearchName
          }}</el-button>
        <el-button class="more" v-show="isShowMore" @click="showMore">
          <span>{{
            isShow ? constans.neuSearch_more : constans.neuSearch_packUp
          }}</span>
          <i :class="isShow ? 'el-icon-arrow-down' : 'el-icon-arrow-up'"></i>
        </el-button>
        <el-button
          @click="buttonFuc(null, 'reset')"
          :accesskey="
            buttons.reset && buttons.reset.accesskey
              ? buttons.reset.accesskey
              : ''
          "
        >{{ constans.neuSearch_btn_reset }}</el-button
        >
        <el-button
          type="primary"
          @click="buttonFuc(buttons.submit, 'submit')"
          @keyup.enter="buttonFuc(buttons.submit, 'submit')"
          :accesskey="
            buttons.submit && buttons.submit.accesskey
              ? buttons.submit.accesskey
              : ''
          "
          :class="
            buttons && buttons.submit && buttons.submit.class
              ? 'buttons.submit.class'
              : ''
          "
        >
          {{
          buttons && buttons.submit && buttons.submit.label
          ? buttons.submit.label
          : constans.neuSearch_btn_submit
          }}
        </el-button>
        <template v-for="(btn, index) in buttons.button">
          <el-button
            :key="index"
            v-if="buttons && buttons.length > 0"
            :class="btn.class"
            @click="
              () => {
                buttonFuc(btn);
              }
            "
          >
            {{ btn.label }}
          </el-button>
        </template>
      </el-form-item>
      <com-modal
        :visible="modalShow"
        :title="advancedSearchName"
        :size="advancedSize"
        @close-modal="modalClose"
      >
        <com-form-area>
          <template v-slot:form>
            <div class="advancedContent">
              <el-collapse
                v-model="activeNames"
                v-if="advancedConfig.length > 1"
              >
                <el-collapse-item
                  :name="sindex"
                  v-for="(sitem, sindex) in advancedConfig"
                  :key="sindex"
                >
                  <template slot="title">
                    <div class="advancedTitle">
                      {{ sitem.title }}
                    </div>
                  </template>
                  <template v-for="titem in sitem.config">
                    <component
                      :is="titem.type + 'Com'"
                      :key="titem.label"
                      :item="titem"
                      :formData="formData"
                      :isReset="isReset"
                    />
                  </template>
                </el-collapse-item>
              </el-collapse>
              <div v-if="advancedConfig.length === 1">
                <template v-for="titem in advancedConfig[0].config">
                  <component
                    :is="titem.type + 'Com'"
                    :key="titem.label"
                    :item="titem"
                    :formData="formData"
                    :isReset="isReset"
                  />
                </template>
              </div>
            </div>
          </template>
        </com-form-area>
        <div class="advancedButton">
          <el-button type="primary" @click="modalClose" style="width: 100%"
          >确定</el-button
          >
        </div>
      </com-modal>
    </el-form>
  </div>
</template>

<script>
import _ from "lodash";
import constans from "../Core/json/constans";

import cascaderCom from "../Core/cascaderCom";
import checkboxButtonCom from "../Core/checkboxButtonCom";
import checkboxCom from "../Core/checkboxCom";
import inputRangeCom from "../Core/inputRangeCom";
import dateCom from "../Core/dateCom";
import dateRangeSingleCom from "../Core/dateRangeSingleCom";
import inputCom from "../Core/inputCom";
import inputTableCom from "../Core/inputTableCom";
import inputNumberCom from "../Core/inputNumberCom";
import inputNumberRangeCom from "../Core/inputNumberRangeCom";
import radioButtonCom from "../Core/radioButtonCom";
import radioCom from "../Core/radioCom";
import selectCom from "../Core/selectCom";
import selectMultipleCom from "../Core/selectMultipleCom";
import sliderCom from "../Core/sliderCom";
import switchCom from "../Core/switchCom";
import textareaCom from "../Core/textareaCom";
import textCom from "../Core/textCom";
import timeCom from "../Core/timeCom";
import uploadCom from "../Core/uploadCom";
import timeRangeSingleCom from "../Core/timeRangeSingleCom";
import selectCustomizeCom from "../Core/selectCustomizeCom";
import transferCom from "../Core/transferCom";

export default {
  name: "com-search",
  components: {
    cascaderCom,
    checkboxButtonCom,
    checkboxCom,
    inputRangeCom,
    dateCom,
    dateRangeSingleCom,
    inputCom,
    inputTableCom,
    inputNumberCom,
    inputNumberRangeCom,
    radioButtonCom,
    radioCom,
    selectCom,
    selectMultipleCom,
    sliderCom,
    switchCom,
    textareaCom,
    textCom,
    timeCom,
    uploadCom,
    timeRangeSingleCom,
    selectCustomizeCom,
    transferCom
  },
  props: {
    config: {
      type: Array,
      default: () => {
        return []; // {isHide: true, 是否在view界面显示 为true时不显示}
      }
    },
    formData: {
      type: Object,
      default: () => {
        return {};
      }
    },
    hideButton: {
      type: Boolean,
      default: () => {
        return false;
      }
    },
    labelWidth: {
      type: String,
      default: () => {
        return "100px";
      }
    },
    buttons: {
      type: Object,
      default: () => {
        return {
          submit: {
            label: "",
            class: "",
            func: () => {
              console.log("no submit function");
            }
          },
          reset: {
            label: "",
            class: "",
            func: (formData, _this) => {
              _this.$refs.comForm.resetFields();
              _this.isReset = true;
              setTimeout(() => {
                _this.isReset = false;
              }, 1000);
            }
          }
        };
      }
    },
    searchLayoutParam: {
      type: Object,
      default: () => {
        return {
          row: 3,
          col: 1
        };
      }
    },
    advancedSearchName: {
      type: String,
      default: "高级搜索"
    },
    advancedSearchShow: {
      type: Boolean,
      default: false
    },
    advancedConfig: {
      type: Array,
      default: () => {
        return [];
      }
    },
    advancedSize: {
      type: String,
      default: "600px"
    },
    isDiy: { // 是否可控列
      type: Boolean,
      default: false
    }
  },
  watch: {
    config(config) {
      this.itemStyleSearcher = {
        width: Math.floor(100 / this.searchLayoutParam.row) + "%",
        "text-align": "right",
        "padding-left": "0"
      };
      this.resize();
    }
  },
  data() {
    return {
      activeNames: 0,
      isReset: false,
      modalShow: false,
      isShow: true, //‘更多’后面的的上下箭头,false关，true开
      isShowMore: true,
      itemStyle: {
        //每个搜索项的宽度
        width: Math.floor(100 / this.searchLayoutParam.row) + "%",
        display: "inline-flex"
      },
      itemStyleSearcher: {
        width: Math.floor(100 / this.searchLayoutParam.row) + "%",
        "text-align": "right",
        "padding-left": "0"
      },
      constans, //引入组件固定文字
      selectMoreWidth: "", //下拉多选的下拉框宽度,
      configList: [],
      completion: [],
      unCompList: []
    };
  },
  methods: {
    rowPadding(index) {
      let result = "";
      if (
        Math.floor((index + 1) / this.searchLayoutParam.row) ===
        Math.floor(this.configList.length / this.searchLayoutParam.row)
      ) {
        result = result + " itemStyleCompletion";
      }
      if ((index + 1) % this.searchLayoutParam.row !== 0) {
        result = result + " spacingItem";
      }
      result = result + " " + index + " " + this.configList.length;
      return result;
    },
    buttonFuc(button, type) {
      let self = this,
        btn = button;
      switch (type) {
        case "submit":
          btn = this.buttons.submit
            ? this.buttons.submit
            : {
              label: "",
              class: "",
              func: () => {
                console.log("no submit function");
              }
            };
          if (!button || button.isCheck === undefined) {
            btn.isCheck = true;
          } else {
            btn.isCheck = button.isCheck;
          }
          break;
        case "reset":
          btn = this.buttons.reset
            ? {
              ...this.buttons.reset,
              func: formData => {
                this.buttons.reset.func(formData);
                // 处理额外的重置数据
                this.isReset = true;
                setTimeout(() => {
                  this.isReset = false;
                }, 1000);
              }
            }
            : {
              label: "",
              class: "",
              func: () => {
                this.$refs.comForm.resetFields();
                this.isReset = true;
                setTimeout(() => {
                  this.isReset = false;
                }, 1000);
              }
            };
          break;
      }
      if (btn && btn.isCheck) {
        this.$refs.comForm.validate(valid => {
          if (valid) {
            btn.func(self.formData);
          } else {
            return false;
          }
        });
      } else {
        btn.func(this.formData, this);
      }
    },
    showMore() {
      this.isShow = !this.isShow;
      this.resize();
    },
    submit(func) {
      let self = this;
      this.$refs.comForm.validate(valid => {
        if (valid) {
          func && func(self.formData);
        } else {
          return false;
        }
      });
    },
    resetFields() {
      this.$refs.comForm.resetFields();
      this.isReset = true;
      setTimeout(() => {
        this.isReset = false;
      }, 1000);
    },
    resize() {
      if (!this.isDiy) {
        let width =
          window.innerWidth ||
          document.documentElement.clientWidth ||
          document.body.clientWidth;
        if (width <= 992) {
          this.searchLayoutParam.row = 2;
        } else if (width <= 1200) {
          this.searchLayoutParam.row = 3;
        } else {
          this.searchLayoutParam.row = 4;
        }
      }
      const rowCount = this.searchLayoutParam.row;
      const colCount = this.searchLayoutParam.col;
      //获取每个搜索项的宽度
      this.$nextTick(() => {
        if (this.$refs && this.$refs.searchWarpper) {
          this.selectMoreWidth =
            this.$refs.searchWarpper.clientWidth / rowCount - 115 + "px";
        }
      });
      this.itemStyle.width = Math.floor(100 / rowCount) + "%";
      this.itemStyleSearcher.width = Math.floor(100 / rowCount) + "%";
      let configNew = this.config.filter(item=>item.isHide != true)
      if (configNew.length > rowCount * colCount) {
        this.isShowMore = true;
      } else {
        this.isShowMore = false;
      }
      //configList

      if (configNew.length / rowCount > colCount && this.isShow == true) {
        this.configList = configNew.slice(0, rowCount * colCount);
      } else {
        this.configList = configNew;
      }
      //completion
      // if (this.config.length > 2) {
      let x = this.configList.length % this.searchLayoutParam.row;
      let n =
        x === 0
          ? this.searchLayoutParam.row - 1
          : this.searchLayoutParam.row - x - 1;
      this.completion = _.take([1, 2, 3, 4, 5, 6, 7, 8, 9, 10], n);
      this.unCompList = _.takeRight(configNew, configNew.length - n - 1);
      // } else {
      //   this.completion = [];
      // }
    },
    showFormItem({ item, formData }) {
      const type = typeof item.show;
      if (type == "function") {
        return item.show(item, formData);
      } else {
        return !(item.show === false);
      }
    },
    clearValidate() {
      this.$refs.comForm.clearValidate();
    },
    changeShowMore(value) {
      this.isShow = value;
      this.resize();
    },
    modalClose() {
      this.modalShow = false;
    },
    showModal() {
      this.modalShow = true;
    }
  },
  mounted() {
    this.resize();
    window.onresize = this.resize;
  }
};
</script>

<style scoped lang="scss">
.searchForm {
  background: #ffffff;
  // padding-top: 18px;
  font-size: 0;
}

.more {
  cursor: pointer;
  display: inline-block;
  font-size: 13px;
  border: 1px solid #dcdfe6;
  padding: 0 8px;
  height: 32px;
  color: #606266;

  i {
    color: #606266;
  }
}

.itemStyle {
  box-sizing: border-box;
  margin-bottom: 16px;
  margin-right: 0 !important;
  font-size: 0;
}
.itemStyleButton,
.itemStyleCompletion {
  box-sizing: border-box;
  margin-bottom: 0 !important;
  margin-right: 0 !important;
  font-size: 0;
}
.spacingItem {
  padding-right: 16px;
}

::v-deep .el-button + .el-button {
  margin-left: 8px;
}

.itemStyleCompletion {
  height: 32px;
}

.itemStyleButton {
  text-align: right;
  margin-right: 5px;
}

.searchBtns {
  display: flex;
  justify-content: flex-end;
  height: 32px;
  margin-right: 8px;
}

.textStyle {
  color: #606266;
}

::v-deep .el-date-editor .el-range__icon {
  line-height: 24px;
}

::v-deep .el-date-editor .el-range-separator {
  line-height: 24px;
}

::v-deep .searchForm .el-form-item__content .el-button {
  //height: 32px;
}

::v-deep .searchForm .el-form-item__error {
  padding-top: 2px;
}

::v-deep .itemStyle .el-input-number {
  width: 100%;
}

::v-deep .itemStyle .el-dropdown {
  width: 100%;
}

::v-deep .itemStyle .el-select {
  width: 100%;
}

::v-deep .itemStyle .el-input__suffix {
  line-height: 32px;
}

::v-deep .itemStyle .el-date-editor--daterange .el-icon-circle-close {
  line-height: 24px;
}

::v-deep .itemStyle .el-date-editor {
  width: 100%;
}

::v-deep .itemStyle .el-cascader {
  width: 100%;
}

::v-deep .itemStyle .el-form-item__label {
  padding: 0;
}

::v-deep .itemStyle .el-form-item__content,
.itemStyle .el-dropdown-menu {
  width: calc(100% - 104px);
  margin-left: 4px;
}

::v-deep .el-cascader__tags {
  span {
    display: none;
  }
}

::v-deep .el-form-item__label {
  line-height: 33px;
}

::v-deep .el-form-item__content {
  line-height: 33px;
}

.advancedContent {
  padding: 0 20px;
  box-sizing: border-box;

  .advancedTitle {
    padding-left: 24px;
    color: #333;
    position: relative;
    font-weight: bold;
    &:before {
      position: absolute;
      top: 18px;
      left: 11px;
      content: "";
      width: 4px;
      background: #1b65b9;
      height: 13px;
      border-radius: 2px;
    }
  }
}
.advancedButton {
  position: absolute;
  bottom: 0;
  z-index: 2;
  right: 0;
  left: 0;
  padding: 0 20px;
  box-sizing: border-box;
}
::v-deep {
  .advancedContent {
    padding-bottom: 60px;
    .el-form-item__content {
      display: flex;
    }
    .el-select {
      width: 100%;
    }
    .el-date-editor--daterange.el-input,
    .el-date-editor--daterange.el-input__inner,
    .el-date-editor--timerange.el-input,
    .el-date-editor--timerange.el-input__inner {
      width: 100%;
      min-width: 350px;
    }
    .el-collapse {
      border-top: 0;
      border-bottom: 0;
    }
    .el-collapse-item__header {
      border-bottom: 1px solid #ebeef5;
      margin-bottom: 15px;
      &:hover {
        background: #f5f5f5;
        border-radius: 5px 5px 0 0;
      }
    }
    .el-collapse-item__wrap {
      border-bottom: 0;
    }
    .el-collapse-item__content {
      padding-bottom: 0;
    }
  }
}
</style>
